<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24" />
    </template>
  </van-cell>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref,watchEffect } from 'vue';
import myAxios from "../plugins/myAxios";
import qs from 'qs';
import UserCardList from "../components/UserCardList.vue"
import {userType} from "../assets/user.d.ts";
import { showSuccessToast, showFailToast } from 'vant';
const route = useRoute();
const { tags } = route.query;
const userList = ref([]);
const isMatchMode = ref<boolean>(false);
const loading = ref(true);
/**
 * 加载数据
 */
const loadData = async () => {
  let userListData;
  loading.value = true;

//心动模式
  if (isMatchMode.value){
    const  num = 10;
    userListData = await myAxios.get('user/match',{
      params: {
        num,
      },
    })
        .then(function (response) {
          console.log('/user/match succeed',response);
          showSuccessToast('请求成功');
          return response?.data;
        })
        .catch(function (error) {
          console.log('/user/match error',error);
          showFailToast('请求失败');
        });
  }else {
    //普通用户使用分页查询
    userListData = await  myAxios.get('/user/recommend',{
      params: {
        pageSize: 8,
        pageNum: 1,
      },
    })
        .then(function (response) {
          console.log('/user/recommend succeed', response);
          showSuccessToast('请求成功');
          return response?.data?.records;
        })
        .catch(function (error) {
          console.log('/user/recommends error',error);
          showFailToast('请求失败');
        });

  }
  if (userListData){
    userListData.forEach((user: userType) =>{
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(() =>{
  loadData();
})


onMounted(async () => {
  myAxios.get('/user/recommend', {
    params: { pageSize: 8,
            pageNum :1,
    }
  }).then(function (response) {


    const userDataList = response?.data?.records;
    console.log("/user/recommend success", userDataList);
    // 解析 tags 字段
    userDataList.forEach(user => {
      if (user.tags) {
        try {
          user.tags = JSON.parse(user.tags);
        } catch (e) {
          console.error("JSON 解析错误:", e, user.tags);
        }
      }
    });
    userList.value = userDataList;
  }).catch(function (error) {


    console.log("/user/recommend fail", error);
  });
});

// axios 请求拦截器
myAxios.interceptors.request.use(config => {
  if (config.method === 'get') {
    config.paramsSerializer = function (params) {
      return qs.stringify(params, { indices: false });
    };
  }
  return config;
}, error => {
  return Promise.reject(error);
});
</script>

<style scoped>
</style>
